/**文章管理 */
<template>
  <div>
    <base-page ref="basePage" :basepage="basePage"></base-page>
    <!-- 审批 -->
    <template>
      <el-dialog
        v-dialogDrag
        :visible.sync="approvalVisible"
        width="80%"
        append-to-body
        center
        title="审批"
        top="0"
      >
        <div style="height:500px;overflow:auto">
          <textarea placeholder="文章内容" id="text-area" v-model="content" disabled></textarea>
          <p style="color:red;" v-show="isFilter">说明：存在屏蔽字！~</p>
          <textarea placeholder="审批意见" id="suggestion" v-model="suggestion"></textarea>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="approvalVisible = false">取 消</el-button>
          <el-button type="primary" @click="result('1')">需修改</el-button>
          <el-button type="primary" @click="result('2')">通 过</el-button>
          <el-button type="primary" @click="result('3')">不通过</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
export default {
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      basePage: {
        // URL
        url: "articleOperation",
        // 查询条件
        searchConf: [
          [
            {
              title: "文章名称",
              type: "input",
              prop: "articleName",
            },
            {
              title: "状态",
              type: "select",
              prop: "state",
              data: [
                {
                  value: "0",
                  label: "待审核",
                },

                {
                  value: "1",
                  label: "待修改",
                },
                {
                  value: "2",
                  label: "已发布",
                },
                {
                  value: "3",
                  label: "作废",
                },
              ],
            },
          ],
        ],
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        // table列
        tableColumnConf: {
          columns: [
            { prop: "articleName", label: "名称" },
            { prop: "introduction", label: "简介" },
            { prop: "authorName", label: "作者名称" },
            { prop: "articleTypes", label: "文章类别" },
            { prop: "state", label: "状态" },
            { prop: "createTime", label: "日期" },
          ],
          operation: {
            state: true,
            detail: false,
            alter: false,
            defs: [
              {
                name: "审批",
                event: "approval",
              },
            ],
          },
        },
        detailConf: {
          title: "",
          data: [],
        },
        // 新增修改form表单设置
        formConf: {
          formData: {},
          width: "50%",
          title: "",
          data: [],
          rules: {},
        },
      },
      content: "",
      suggestion: "",
      approvalVisible: false,
      approvalObject: {},
      filterWords: [],
      isFilter: false,
    };
  },
  methods: {
    getFilterWord() {
      this.COMMON.httpPost(
        this,
        "filterWordOperation/selectList",
        {
          del: "0",
          available: "1",
        },
        (result) => {
          if (result.result === "SUCCESS") {
            this.filterWords = result.list;
          }
        },
        (result) => {}
      );
    },
    result(state) {
      // 提交审批结果
      var user = JSON.parse(localStorage.user);
      var data = {
        createBy: user.id,
        state: state,
        articleId: this.approvalObject.id,
        suggestion: this.suggestion,
      };
      this.COMMON.httpPost(
        this,
        "articleStateOperation/approval",
        data,
        (result) => {
          if (result.result === "SUCCESS") {
            this.$refs.basePage.getPage();
          }
        },
        (result) => {}
      );
      this.approvalVisible = false;
    },
    event(event) {
      switch (event) {
      }
    },
    operation(row, event) {
      switch (event) {
        case "approval": {
          if (row.state === "2") {
            this.$message({
              message: "已发表不能再次审批",
              type: "warning",
            });
            return ;
          }
          // 获取文章内容
          this.COMMON.httpPost(
            this,
            "articleOperation/getContent",
            { id: row.id },
            (result) => {
              if (result.result === "SUCCESS") {
                this.isFilter = false;
                this.content = result.data;
                this.approvalVisible = true;
                this.approvalObject = row;
                // 获取敏感词汇情况
                if (
                  this.filterWords != undefined &&
                  this.filterWords.length != 0
                ) {
                  this.filterWords.forEach((e) => {
                    if (!this.isFilter) {
                      this.isFilter = this.content.indexOf(e.word) != -1;
                    }
                    this.content = this.content.replaceAll(e.word, "***");
                  });
                }
              }
            },
            (result) => {}
          );
          // 显示弹窗提示
        }
      }
    },
    selectChange(type, pro, value) {},
    formatter(data, prop, index) {
      switch (prop) {
        case "state": {
          if (data === "0") {
            return "待审核";
          } else if (data === "2") {
            return "已发表";
          } else if (data === "1") {
            return "待修改";
          } else if (data === "3") {
            return "弃稿";
          }
        }
        case "articleTypes": {
          var types = "";
          data.forEach((element) => {
            types = types + element.typeName + " ";
          });
          return types;
        }
        default: {
          return data;
        }
      }
    },
  },
  activated: function () {
    this.getFilterWord();
  },
};
</script>
<style>
/* 该行代码实现隐藏滚动条但是能进行滚轮 */
::-webkit-scrollbar {
  display: none;
}
#text-area {
  scrollbar-face-color: #ff80ff;
  border: 1px solid gainsboro;
  overflow: auto;
  height: 80%;
  width: 95%;
  margin: auto;
  outline: none;
  font-size: 18px;
}
#suggestion {
  scrollbar-face-color: #ff80ff;
  border: 1px solid gainsboro;
  overflow: auto;
  width: 95%;
  height: 10%;
  margin: auto;
  outline: none;
  font-size: 18px;
}
</style>